<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>班级平均分统计结果</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.3.2/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <style>
        body {
            background-color: #f8f9fa;
        }
        .header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 2rem 0;
            margin-bottom: 2rem;
        }
        .result-container {
            background: white;
            border-radius: 15px;
            box-shadow: 0 8px 32px rgba(0,0,0,0.1);
            padding: 2rem;
            margin-bottom: 2rem;
        }
        .table-container {
            overflow-x: auto;
        }
        .table th {
            background-color: #667eea;
            color: white;
            border: none;
            font-weight: 600;
        }
        .table td {
            vertical-align: middle;
        }
        .average-badge {
            font-size: 1.1rem;
            font-weight: 600;
        }
        .back-btn {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border: none;
            padding: 0.75rem 2rem;
            font-size: 1.1rem;
            border-radius: 25px;
            color: white;
            text-decoration: none;
            display: inline-block;
        }
        .back-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 15px rgba(0,0,0,0.2);
            color: white;
        }
        .summary-card {
            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
            color: white;
            padding: 1.5rem;
            border-radius: 15px;
            margin-bottom: 2rem;
        }
        .empty-class {
            color: #6c757d;
            font-style: italic;
        }
    </style>
</head>
<body>
    <div class="header">
        <div class="container">
            <h1 class="text-center mb-0">
                <i class="fas fa-chart-bar me-2"></i>
                班级平均分统计结果
            </h1>
            <p class="text-center mb-0 mt-2">12个班级的成绩平均分汇总</p>
        </div>
    </div>

    <div class="container">
        {% set valid_averages = class_averages|selectattr("average", "number")|list %}
        {% set total_average = (valid_averages|map(attribute='average')|sum / valid_averages|length) if valid_averages else 0 %}
        
        <div class="summary-card">
            <div class="row text-center">
                <div class="col-md-4">
                    <h3>{{ valid_averages|length }}</h3>
                    <p class="mb-0">有效班级数</p>
                </div>
                <div class="col-md-4">
                    <h3>{{ "%.2f"|format(total_average) }}</h3>
                    <p class="mb-0">总平均分</p>
                </div>
                <div class="col-md-4">
                    <h3>{{ class_averages|map(attribute='student_count')|sum }}</h3>
                    <p class="mb-0">总学生数</p>
                </div>
            </div>
        </div>

        <div class="result-container">
            <div class="table-container">
                <table class="table table-hover">
                    <thead>
                        <tr>
                            <th><i class="fas fa-users me-2"></i>班级</th>
                            <th><i class="fas fa-user-graduate me-2"></i>学生人数</th>
                            <th><i class="fas fa-calculator me-2"></i>平均分</th>
                            <th><i class="fas fa-medal me-2"></i>评级</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for class_data in class_averages %}
                        <tr>
                            <td><strong>{{ class_data.class_name }}</strong></td>
                            <td>{{ class_data.student_count }}</td>
                            <td>
                                {% if class_data.average == '输入格式错误' %}
                                    <span class="text-danger">
                                        <i class="fas fa-exclamation-triangle me-1"></i>
                                        {{ class_data.average }}
                                    </span>
                                {% elif class_data.average == 0 and class_data.student_count == 0 %}
                                    <span class="empty-class">未录入成绩</span>
                                {% else %}
                                    <span class="average-badge badge bg-primary">{{ class_data.average }} 分</span>
                                {% endif %}
                            </td>
                            <td>
                                {% if class_data.average|int >= 90 %}
                                    <span class="badge bg-success">优秀</span>
                                {% elif class_data.average|int >= 80 %}
                                    <span class="badge bg-info">良好</span>
                                {% elif class_data.average|int >= 70 %}
                                    <span class="badge bg-warning text-dark">中等</span>
                                {% elif class_data.average|int >= 60 %}
                                    <span class="badge bg-secondary">及格</span>
                                {% elif class_data.average|int > 0 %}
                                    <span class="badge bg-danger">待提高</span>
                                {% else %}
                                    <span class="badge bg-light text-dark">-</span>
                                {% endif %}
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
            
            <div class="text-center mt-4">
                <a href="/" class="back-btn">
                    <i class="fas fa-arrow-left me-2"></i>
                    返回重新录入
                </a>
            </div>
        </div>
    </div>

    <script src="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.3.2/js/bootstrap.bundle.min.js"></script>
</body>
</html>